import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:pet_app/components/back_btn/view.dart';
import 'package:pet_app/model/enums/article_type.dart';
import 'package:pet_app/model/enums/pet_type.dart';

import 'logic.dart';

class MenuPanelPage extends StatelessWidget {
  MenuPanelPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<MenuPanelLogic>();
    return SafeArea(
        child: Stack(
      children: [
        SizedBox(
          width: double.infinity,
          // 容器宽度
          height: 240.0,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(0), // 设置圆角
            child: Image.asset(
              logic.img,
              height: 240,
              fit: BoxFit.cover,
            ),
          ),
        ),
        Positioned(
          top: 16,
          left: 16,
          child: BackBtnComponent(
            bgColor: Colors.redAccent.withOpacity(0.8),
          ),
        ),
        Positioned(
          top: 220,
          child: Container(
            padding: const EdgeInsets.all(12),
            height: 500,
            width: ScreenUtil().screenWidth,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(16),
              color: Colors.white,
            ),
            child: GridView.count(
              // padding: const EdgeInsets.only(left: 12,top: 12,right: 12,bottom:
              // 80),
              shrinkWrap: true,
              padding: const EdgeInsets.symmetric(vertical: 12),
              crossAxisSpacing: 12,
              mainAxisSpacing: 12,
              crossAxisCount: 2,
              physics: const NeverScrollableScrollPhysics(),
              children: [
                Column(
                  children: [
                    Expanded(
                      child: _buildCard(
                          ArticleType.breedSearch,
                          Colors.orangeAccent,
                          '品种查询',
                          'Br'
                              'eed Search',
                          logic,
                          logic.petType == PetType.dog
                              ? 'assets/images/business/breed'
                                  '.png'
                              : 'assets/images/business/cat-breed.png',
                          nameFontSize: 22,
                          englishNameFontSize: 16,
                          picSize: 48,
                          isSvgPic: false),
                    ),
                    _buildCard(
                        ArticleType.breed,
                        Colors.amberAccent,
                        '品种分组',
                        ''
                            'Bre'
                            'ed Group',
                        logic,
                        logic.petType == PetType.dog
                            ? 'assets/images/business/group'
                            '.png':'assets/images/business/cat-group.png',
                        nameFontSize: 22,
                        englishNameFontSize: 16,
                        picSize: 48,
                        isSvgPic: false),
                  ],
                ),
                _buildCard(ArticleType.health, Colors.redAccent, '健康', 'Health',
                    logic, 'assets/images/business/health.svg'),
                _buildCard(ArticleType.diet, Colors.deepOrangeAccent, '营养饮食',
                    'Diet', logic, 'assets/images/business/diet.svg'),
                _buildCard(ArticleType.training, Colors.blueAccent, '行为训练',
                    'Training', logic, 'assets/images/business/training.svg'),
              ],
            ),
          ),
        )
      ],
    ));
  }

  Widget _buildCard(ArticleType type, Color bgColor, String name,
      String englishName, MenuPanelLogic logic, String picUrl,
      {double? nameFontSize,
      double? englishNameFontSize,
      double? picSize,
      bool isSvgPic = true}) {
    return GestureDetector(
      onTap: () => logic.toListPage(type),
      child: SizedBox(
        width: double.infinity,
        child: Card(
          color: bgColor,
          elevation: 5,
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Stack(
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      name,
                      style: TextStyle(
                          fontSize: nameFontSize ?? 24,
                          color: Colors.white.withOpacity(0.84)),
                    ),
                    Text(
                      englishName,
                      style: TextStyle(
                          fontSize: englishNameFontSize ?? 18,
                          color: Colors.white60),
                    ),
                  ],
                ),
                Positioned(
                    bottom: 0,
                    right: 0,
                    child: isSvgPic
                        ? SvgPicture.asset(
                            picUrl,
                            height: picSize ?? 80,
                            width: picSize ?? 80,
                          )
                        : Image.asset(picUrl,
                            height: picSize ?? 80, width: picSize ?? 80))
              ],
            ),
          ),
        ),
      ),
    );
  }
}
